{% block sw_flow_detail_flow %}
<div class="sw-flow-detail-flow">
    {% block sw_flow_detail_flow_content %}
    <div
        class="sw-flow-detail-flow__content"
        :class="{'sw-flow-detail-flow-template': isTemplate }"
        :style="flowContainerStyle"
    >
        <mt-banner
            v-if="isUnknownTrigger"
            variant="attention"
            class="sw-flow-detail-flow__warning-unknow-trigger"
        >
            <p>{{ $tc('sw-flow.flowNotification.messageUnknownTriggerWarning') }}</p>
            <p>{{ $tc('sw-flow.flowNotification.textIntroduce') }}</p>
            <ul>
                <li>{{ $tc('sw-flow.flowNotification.textGuide1') }}</li>
                <li>{{ $tc('sw-flow.flowNotification.textGuide2') }}</li>
                <li>{{ $tc('sw-flow.flowNotification.textGuide3') }}</li>
            </ul>
        </mt-banner>

        <mt-banner
            v-if="!isLoading && !isUnknownTrigger && showActionWarning "
            variant="attention"
            class="sw-flow-detail-flow__warning-box"
        >
            {{ $tc('sw-flow.detail.warningText') }}
        </mt-banner>
        {% block sw_flow_detail_trigger_card %}
        <div class="sw-flow-detail-flow__trigger-card">
            {% block sw_flow_detail_flow_trigger_select %}
            <div class="sw-flow-detail-flow__trigger-select">
                {% block sw_flow_detail_flow_single_select %}
                <sw-flow-trigger
                    :disabled="!acl.can('flow.editor')"
                    :event-name="flow.eventName"
                    :is-unknown-trigger="isUnknownTrigger"
                    @option-select="onEventChange"
                />
                {% endblock %}
            </div>
            {% endblock %}

            {% block sw_flow_detail_flow_trigger_explains %}
            <div
                v-if="!flow.eventName"
                class="sw-flow-detail-flow__trigger-explain"
            >
                {% block sw_flow_detail_flow_trigger_explains_title %}
                <h4>{{ $tc('sw-flow.detail.trigger.title') }}</h4>
                {% endblock %}

                {% block sw_flow_detail_flow_trigger_explains_help_text %}
                <p v-html="$tc('sw-flow.detail.trigger.helpText')"></p>
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_flow_detail_flow_sequence_diagram %}
        <div
            v-if="flow.eventName"
            class="sw-flow-detail-flow__sequence-diagram"
        >
            {% block sw_flow_detail_flow_start_line %}
            <div class="sw-flow-detail-flow__oval"></div>
            {% endblock %}

            {% block sw_flow_detail_flow_transition_group %}
            <transition-group
                name="list"
                tag="div"
            >
                {% block sw_flow_detail_flow_position %}
                <div
                    v-for="sequence in formatSequences"
                    :key="getSequenceId(sequence)"
                    class="sw-flow-detail-flow__position list-item"
                >

                    {% block sw_flow_sequence_icon_plus %}
                    <div
                        class="sw-flow-detail-flow__position-plus"
                        :disabled="!acl.can('flow.editor')"
                        role="button"
                        tabindex="0"
                        @click="onAddRootSequence"
                        @keydown.enter="onAddRootSequence"
                    >
                        <mt-icon
                            size="16px"
                            name="regular-plus-xs"
                        />
                    </div>
                    {% endblock %}

                    {% block sw_flow_sequence_icon_connection %}
                    <div class="sw-flow-detail-flow__position-connection">
                        <mt-icon
                            size="16px"
                            name="regular-chevron-right-s"
                        />
                    </div>
                    {% endblock %}

                    {% block sw_flow_detail_flow_sequences %}
                    <div
                        class="sw-flow-detail-flow__sequences"
                    >
                        <sw-flow-sequence
                            name="root-sequence"
                            :sequence="sequence"
                            :disabled="!acl.can('flow.editor')"
                            :is-unknown-trigger="isUnknownTrigger"
                        />
                    </div>
                    {% endblock %}
                </div>
                {% endblock %}
            </transition-group>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_flow_detail_flow_modal_extension %}
    {% endblock %}
</div>
{% endblock %}
